<template>
	<view class="box">
		<view class="from">
			<view class="left">
				收货人
			</view>
			<input v-model.trim="consignee" type="text" class="ipt" placeholder="请输入姓名">
		</view>
		<view class="from">
			<view class="left">
				手机号码
			</view>
			<input v-model.trim="mobile" maxlength="11" type="text" class="ipt" placeholder="请输入手机号码">
		</view>
		<view class="from" @click="bottomshow = true">
			<view class="left">
				所在地区
			</view>
			<u--input v-model="name" placeholder="请输入内容" placeholderStyle="#A8A8A8" disabled border="none"
				suffixIcon="map-fill"
				:customStyle="{'width': '100%;','height': '86rpx;','background-color': '#f7f6f9;', 'padding': '0 30rpx'}"
				suffixIconStyle="color:#fd8c07;" />
		</view>
		<view class="from" style="align-items: flex-start;">
			<view class="left">
				详细地址
			</view>
			<u--textarea v-model.trim="address" height="203rpx" placeholderStyle="#A8A8A8"
				:customStyle="{'background-color': '#f7f6f9;'}" border="none" placeholder="小区楼栋/乡村名称"></u--textarea>
		</view>

		<view class="address" @click="checkDefault">
			<view class="">
				设为默认收货地址
			</view>
			<radio style="scale: 0.7;" color='#fd8c07' :checked="Default == 0 ? false : true" />
		</view>
		<view class="btn" @click="AddressDo">
			确认并保存
		</view>

		<!-- 城市选择器 -->
		<view class="cu-modal" v-if="bottomshow">
			<view class="cu-dialog">
				<view class="cu-title">
					<view @click="bottomshow = false">取消</view>
					<view @click="determine">确定</view>
				</view>
				<picker-view class="picker-view" indicator-style="height: 50px;" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in region[0]" :key="index">{{ item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in region[1]" :key="index">{{ item.name }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in region[2]" :key="index">{{ item.name }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		AddressApi
	} from '@/api';
	export default {
		data() {
			return {
				bottomshow: false, // 城市选择器弹出框
				region: [], // 存储接口返回的当前选中省份城市数据 数组第一个是省份  第二是市  第三是区
				value: [0, 0, 0], // 暂时存储自己选中的省市区的id
				province: -1, // 保存省份id
				city: -1, // 保存市id
				district: -1, // 保存区id
				address: '', // 详细地址
				mobile: '', // 电话号码
				consignee: '', // 姓名
				name: '', // 省市区合起来的字符串
				address_id: 0, // 修改的地址id
				is_default: 0, // 是否是默认地址
				Default: 0, // 是否设置为默认的按钮
			};
		},
		onLoad({
			id
		}) {
			this.userRegionList(0)
			if (id) {
				this.address_id = id
				this.UserAddressInfo(id)
			} else {
				this.UserAddressInfo(0)
			}
		},
		methods: {
			// 一开始进来这个页面，（新增地址不管）如果是修改地址，就动态获取数值绑定到输入框 
			UserAddressInfo(id) {
				AddressApi.UserAddressInfo({
						address_id: id
					})
					.then((res) => {
						// console.log("新增地址或者修改地址返回的数据", res)
						if (res.result != '') {
							this.consignee = res.result.consignee
							this.mobile = res.result.mobile
							this.address = res.result.address

							this.is_default = res.result.is_default
							this.province = res.result.province // 修改地址原有的省份id
							this.city = res.result.city // 修改地址原有的市id
							this.district = res.result.district // 修改地址原有的区id
						}
						if (res.province != '' && res.city != '' && res.district != '') {
							var addressName = ""
							res.province.forEach((item) => {
								if (item.id == this.province) {
									addressName += item.name
									return
								}
							})
							res.city.forEach((item) => {
								if (item.id == this.city) {
									addressName += '-' + item.name + '-'
									return
								}
							})
							res.district.forEach((item) => {
								if (item.id == this.district) {
									addressName += item.name
									return
								}
							})
							this.name = addressName
						}
					})
			},
			//获取省市区数据
			userRegionList(id) {
				AddressApi.UserRegionList({
						region_id: id
					})
					.then(res => {
						this.region.push(res.result)
						if (this.region.length < 3) {
							this.userRegionList(res.result[0].id)
						}
					})
					.catch(err => {
						console.log(err);
					})
			},

			// 滑动选择省市区的动态事件
			async bindChange(e) {
				try {
					this.value = e.detail.value
					if (this.value[0] > 0) {
						const res = await AddressApi.UserRegionList({
							region_id: this.region[0][e.detail.value[0]].id
						})
						this.region[1] = res.result
						this.$forceUpdate();
						const res2 = await AddressApi.UserRegionList({
							region_id: this.region[1][e.detail.value[1]].id
						})
						this.region[2] = res2.result
						this.$forceUpdate();
					}
					if (this.value[1] > 0) {
						const res = await AddressApi.UserRegionList({
							region_id: this.region[1][e.detail.value[1]].id
						})
						this.region[2] = res.result
						this.$forceUpdate();
					}
				} catch (err) {
					console.log(err);
				}
			},
			// 城市选择器的确定事件
			determine() {
				this.province = this.region[0][this.value[0]].id
				this.city = this.region[1][this.value[1]].id
				this.district = this.region[2][this.value[2]].id
				this.name = this.region[0][this.value[0]].name + '-' + this.region[1][this.value[1]].name + '-' + this
					.region[2][this.value[2]].name
				this.bottomshow = false
			},
			// 新增或修改地址的提交事件
			AddressDo() {
				if (this.consignee == '') {
					return uni.showToast({
						title: '请输入联系人姓名',
						icon: 'none'
					})
				}
				if (!(/^1[3|4|5|6|7|8|9]\d{9}$/.test(this.mobile))) {
					return uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
				}
				if (this.province == -1 || this.city == -1 || this.district == -1) {
					return uni.showToast({
						title: '请选择完整的省市区',
						icon: 'none',
					})
				}
				if (this.address == '') {
					return uni.showToast({
						title: '请输入详细地址',
						icon: 'none',
					})
				}
				let data = {
					address_id: this.address_id,
					consignee: this.consignee,
					mobile: this.mobile,
					province: this.province,
					city: this.city,
					district: this.district,
					address: this.address,
					is_default: this.is_default
				}

				if (this.Default) data.is_default = this.Default
				// console.log("新增地址需要的参数", data)
				AddressApi.UserAddressDo(data)
					.then((res) => {
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
						// console.log("提交地址事件", res)
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					})
			},
			checkDefault() {
				if (this.Default)
					return this.Default = 0
				return this.Default = 1
			},
		},
	}
</script>

<style lang="scss" scoped>
	input {
		padding: 0 30rpx;
	}

	.box {
		width: 100vw;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 34rpx;

		.btn {
			position: fixed;
			bottom: calc(30rpx + constant(safe-area-inset-bottom));
			bottom: calc(30rpx + env(safe-area-inset-bottom));
			left: 30rpx;
			width: 690rpx;
			height: 88rpx;
			border-radius: 50rpx;
			opacity: 1;
			background: linear-gradient(173.2deg, #f8b280 0%, #ff8b38 100%);
			text-align: center;
			line-height: 88rpx;
			color: #fff;
			font-size: 30rpx;
		}

		.address {
			font-size: 28rpx;
			font-weight: 400;
			display: flex;
			align-items: center;
			margin-top: 35rpx;

			view {
				margin-right: 10rpx;
			}
		}

		.from {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			.left {
				font-size: 28rpx;
				font-weight: 400;
				width: 120rpx;
				margin-right: 28rpx;
			}

			.ipt {
				flex: 1;
				width: 547rpx;
				height: 86rpx;
				background-color: #f7f6f9;
				box-sizing: border-box;
				// padding-left: 20rpx;
				font-size: 26rpx;
				font-weight: 400;

				&::placeholder {
					color: #a8a8a8;
					font-size: 26rpx;
					font-weight: 400;

				}
			}
		}
	}

	.cu-modal {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		padding-bottom: 30rpx;
		z-index: 99;
	}

	.cu-dialog {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.picker-view {
		background-color: #fff;
	}

	picker-view-column {
		height: 400rpx;
		text-align: center;
	}

	.cu-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		background-color: #fef2e6;
		color: #333;
		font-weight: bold;
		font-size: 35rpx;
		padding: 0rpx 35rpx;
	}
</style>